<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>yunketang</title>
	<style>
	header{
		width: 1250px;
		height: 60px;
		background-color: gray;
	}
	header>img{
	float: left;
}
.n1{
	color: white;
	font-family: 微软雅黑;
	float: left;
	margin:18px;
}
	header>input{
		float: left;
		width: 300px;
		height: 30px;
		padding: 0;
		margin-top: 10px;
		background-color: white;
		border-right: none;
	}
	header>button{
		float: left;
		width: 40px;
		height: 35px;
		margin-top: 13px;
		background-color: white;
	}
	.img1{
		float: left;
		margin:15px;
	}
	.img2{
		margin-top: -5px;
		margin-left: -5px;
		float: left;
	}
	.img3{
		margin-top: 15px;
		margin-right: 5px;
		float: left;
	}
	header{
		overflow: hidden;
	}
	.m1{
		width: 1250px;
		height: 120px;
		/*background-color: skyblue;*/
	}
	ul{
		list-style: none;
		margin: 0;
		overflow: hidden;
	}
	h3{
		color: gray;
	}
a{
	color: gray;
	font:520 18px/50px 微软雅黑;
	margin-left:20px;
	float: left;
	text-decoration: none;
	}
	.m2{
		width: 1250px;
		height: 400px;
		background-color: white;
	}
	.middle{
		width: 1150px;
		height: 50px;
		background-color: white;
		position: relative;
		top:+15px;
		margin-left: 30px;
	}
	.chang{
		color: green;
		text-decoration: underline;
		margin-left: -20px;
	}
	.picture{
		position: relative;
		top:+35px;
		left: 30px;
		float: left;
		margin-left: 20px;
		width: 223px;
		height: 320px;
		border: 1px solid #ccc;
}
.b1{
	color: white;
	margin-left:0;
	margin-right:10px;
	background-color: green;
	/*display:inline-block;
	width: 20px;
	height: 30px;*/
	}
	</style>

</head>
<body>
	<header>
		<img class="img1" src="yunketang/logo.png" alt="">
		<div class="n1">精品课</div>
		<div class="n1">微专业</div>
		<div class="n1">下载APP</div>
		<input type="text" placeholder="课堂.搜索课程"></input>
		<button><img class="img2" src="yunketang/search.png"></button>
		<div class="n1">我的学习</div>
		<div class="n1">消息</div>
		<div class="n1">购物车</div>
		<div class="n1">|</div>
		<div class="n1">登录/注册</div>
		<div ><img class="img3" src="yunketang/small.jpg"></div>
	</header>
	<nav class="m1">
		<div class="b">
		<ul >
		<h3>首页>精品课</h3>
		<li><a class="b1" href="#">全 部</a></li>
			<li><a href="#">办公效率</a></li>
			<li><a href="#" class="c">职业发展</a></li>
			<li><a href="#">编程开发</a></li>
			<li><a href="#">产品设计</a></li>
			<li><a href="#">生活方式 </a></li>
			<li><a href="#">升学销导</a></li>
			<li><a href="#">语言学习</a></li>
			</ul>
		</div>
	</nav>
	<nav class="m2">
		<div class="middle">
			<ul >
				<li ><a class="chang" href="#">畅销</a></li>
				<li ><a href="#">好评</a></li>
				<li ><a href="#">新课</a></li>
			</ul>
		</div>
	<div class="picture">
		<img class="img01" src="yunketang/1.png">
		<h4>秋叶Office三合一<br/>幻方秋叶PPT</h4>
		<p ><img class="img001" src="yunketang/star.png">5(5346人学过)</p>
		<p>&yen399.00</p>
	</div>
	<div class="picture">
		<img class="img02" src="yunketang/2.png">
		<h4>PS教程超级合租<br/>【800+集爆款评】</h4>
		<h5>设计软件函</h5>
		<p ><img class="img001" src="yunketang/star.png">4(5346人学过)</p>
		<p>&yen199.00</p>
	</div>
	<div class="picture">
		<img class="img03" src="yunketang/3.jpg">
		<h4>和秋叶一起学PPT</h4>
		<h5>幻方秋叶PPT</h5>
		<p ><img class="img001" src="yunketang/star.png">34789人学过</p>
		<p>&yen169.00</p>
	</div>
	<div class="picture">
		<img class="img04" src="yunketang/4.jpg">
		<h4>街舞微信视频零基础制作课<br/>程</h4>
		<h5>街舞影像人</h5>
		<p >160人学过</p>
		<p>&yen298.00</p>
	</div>
	<div class="picture">
		<img class="img05" src="yunketang/5.png">
		<h4>VIP学习卡使快速成长</h4>
		<h5>齐论教育</h5>
		<p >35人学过</p>
		<p>&yen2198.00</p>
	</div>
	</nav>
</body>
</html>